<!--
 * @Description: 分页封装
 * @Date: 2022-09-05 16:11:41
 * @LastEditTime: 2022-09-05 17:25:26
 * @FilePath: \vue3-ts-vite-pinia\src\components\pagination\pagination.vue
-->
<template>
  <div class="pagination">
    <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizeArray"
      :small="small" background layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
// 当前页 当前页数 分页组件的尺寸 数据总量 每一页的容量
interface pageOptions {
  currentPage: number;
  pageSize: number;
  small: boolean;
  total: number,
  pageSizeArray: Array<number>;
}
const props = withDefaults(defineProps<pageOptions>(), {})
const emits = defineEmits(["handleSizeChange", "handleCurrentChange"])
// 当前页大小pageSize改变
const handleSizeChange = (val: number) => {
  emits("handleSizeChange", val)
}
// 当前页currentPage改变
const handleCurrentChange = (val: number) => {
  emits("handleCurrentChange", val)
}
</script>

<style scoped>
</style>